<template>
  <el-dialog v-model:visible="visible" title="确认操作">
    <span>你确定要执行这个操作吗？</span>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const emit = defineEmits(['confirm', 'cancel'])

const open = () => {
  visible.value = true
}

const handleConfirm = () => {
  emit('confirm')
  visible.value = false
}

const handleCancel = () => {
  emit('cancel')
  visible.value = false
}

// Expose methods to parent component
defineExpose({
  open
})
</script>
